/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container" v-if="!nodata">
		<jy-quick-btns></jy-quick-btns>
		<!-- 自定义底部start -->
		<view class="box">
			<view v-for="(item,index) in footerList" :key="index" class="nav" @click="handleChangeCurrentPage(item)">
				<view class="itemtt">
					<image class="img" v-if="item.footer_ind !=4 || !has_notReadMsg" :src="current_ind == item.footer_ind?item.icon2:item.icon" mode="aspectFit"></image>
					<uni-badge :text="dot_text" v-if="item.footer_ind ==4 && has_notReadMsg==true" type='error' size="small" absolute="rightTop"><image class="img" :src="current_ind == item.footer_ind?item.icon2:item.icon" mode="aspectFit"></image></uni-badge>
					<text class="texttt" :style="current_ind == item.footer_ind ? 'color:#4b89ff' : 'color:#9B9B9B'">{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 自定义底部end -->
		<view class="allcourse">
			<text v-if="set.diypage.is_livetojx==2 || is_sh==1">全部</text>
			<image src="../../static/kechengtuijian.png" mode="aspectFit" v-else></image>
		</view>
		
		
		<view class="course">
			<view class="course-list" v-if="set.diypage.is_livetojx!=2">
				<view class="course-list-item" @click="navigate(item.id, item.media,item)" v-for="(item, index) in courseList" :key="index">
					<image :src="item.thumb" mode="aspectFit"></image>
					<text>{{item.menuname ? item.menuname : item.zbtitle}}</text>
					<text>{{item.jianjie ? item.jianjie : item.zbjianjie}}</text>
					<view class="item-bottom" v-if="is_sh == 0">
						<view class="item-bottom-left" v-if="item.media !== 'live'">
							<image src="../../static/book.png" mode="aspectFit"></image>
							<text>{{item.ksnum}}课时</text>
						</view>
						<view class="item-bottom-right">
							<text v-if="is_sh==0">￥{{item.price}}</text>
							<text v-if="item.password!='' && item.media === 'live' ">[密码]</text>
						</view>
					</view>
					<view class="item-bottom" v-else>
						<view class="item-bottom-right">
							<text v-if="is_sh==0">￥{{item.price}}</text>
						</view>
					</view>
					<view class="course-list-item-vip" v-if="item.lid !=0 && item.media !== 'live' && is_sh == 0">
						{{item.levelname}}
					</view>
					<view class="icon" v-if="item.media === 'live'">直播</view>
					<view class="icon" v-else-if="item.media === 'audio'">音频</view>
					<view class="icon" v-else-if="item.media === 'video'">视频</view>
					<view class="icon" v-else-if="item.media === 'tuwen'">图文</view>
					<view class="icon" v-else-if="item.media === 'all'">混合</view>
				</view>
			</view>
			<view class="course-list" v-else>
				<view class="course-list-item" @click="navigate(item.id, 'mall',item)" v-for="(item, index) in courseList" :key="index">
					<image :src="item.thumb" mode="aspectFit"></image>
					<text>{{item.name}}</text>
					<view class="item-bottom" v-if="is_sh == 0">
						<view class="item-bottom-left" >
							<text style="text-decoration: line-through;font-size: 22rpx;">原价￥{{item.oldprice}}</text>
						</view>
						<view class="item-bottom-right">
							<text v-if="is_sh==0">￥{{item.price}}</text>
						</view>
					</view>
					<view class="item-bottom" v-else>
						<view class="item-bottom-right">
							<text v-if="is_sh==0">￥{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载 -->
		<uni-load-more style="margin-bottom:25upx;" :status="loading_status" showIcon iconType></uni-load-more>
	</view>
	<view style="text-align: center;" v-else>
		<image src="../../static/wudingdan.png" mode="aspectFit"></image>
	</view>
</template>

<script>
	import { getZhiBoList } from '@/request/zhibo'
	import { postSonflGoodslist } from '@/request/shopping.js'
	import {postSearchCourse} from '@/request/search'
	import {getMoretjCourse} from '@/request/index'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {uniLoadMore},
		data() {
			return {
				set:[],
				courseList: [],
				HOST_URL:uni.HOST_URL,
				page:0,
				loading_status: 'more',
				nodata: false,
				is_sh: 1,
				tid:0,
				current_ind:3,
				footerList: [
					{
						icon: '../../static/andy-ADTabbar/home.png',
						icon2: '../../static/andy-ADTabbar/home2.png',
						name: '首页',
						footer_ind: 1,
						page_route: '/pages/index/index'
					},
					{
						icon: '../../static/andy-ADTabbar/shop.png',
						icon2: '../../static/andy-ADTabbar/shop2.png',
						name: '商城',
						footer_ind: 2,
						page_route: '/pages/mall/shopping/shopping'
					},
					{
						icon: '../../static/andy-ADTabbar/video.png',
						icon2: '../../static/andy-ADTabbar/video2.png',
						name: '精选',
						footer_ind: 3,
						page_route: '/pages/course-list/course-list'
					},
					{
						icon: '../../static/andy-ADTabbar/msg.png',
						icon2: '../../static/andy-ADTabbar/msg2.png',
						name: '消息',
						footer_ind: 4,
						page_route: '/pages/message/message'
					},
					{
						icon: '../../static/andy-ADTabbar/my.png',
						icon2: '../../static/andy-ADTabbar/my2.png',
						name: '我的',
						footer_ind: 5,
						page_route: '/pages/user/user'
					}
				],
				dot_text:0,
				has_notReadMsg:true
			};
		},
		onReachBottom(){
			this.loading_status= 'loading'
			setTimeout(() => {
				this.loading_status= 'more'
			}, 1000)
			this.page++
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onShow() {
			this.dot_text = getApp().globalData.dot_text;
		},
		onLoad(option) {
			// #ifdef MP-TOUTIAO
			this.footerList[1].page_route = '/pages/sign-in/sign-in';
			this.footerList[1].name = '签到';
			// #endif
			var option = option;
			var set = uni.getStorageSync('base_set');
			this.set = set;
			this.is_sh = set.smallapp.is_sh;
			const BASE_URL = uni.BASE_URL;
			console.log('设置项',set)
			console.log('携带参数',option)
			if(JSON.stringify(option) != "{}"){
				console.log('触发携带参数')
				if(option.tid){
					this.tid=option.tid
					uni.request({
						url: BASE_URL+'index/live/livelist',
						method:'POST',
						data:{
							tid:option.tid
						},
						success:(res) =>{
							console.log(res.data);
							this.courseList = res.data.data
							this.courseList.forEach(item => {
								item.media = 'live'
							})
						},
						fail:(res)=> {
							console.log(res.data,1111);
						}
					});
				}
				
				let userinfo=uni.getStorageSync('userinfo')
				if(option.goodstype) {
					if(option.media == 'live') {
						getZhiBoList().then(res => {
							console.log(res.data)
							this.courseList = res.data.data
							this.courseList.forEach(item => {
								item.media = 'live'
							})
						})
					}else {
						postSonflGoodslist({goodstype: option.goodstype, flid: option.flid, sonflid: option.sonflid}).then(res => {
							console.log(res.data)
							this.courseList = res.data.data
						})
					}
				}
				
				if(option.keyword) {
					postSearchCourse({keyword: option.keyword}).then(res => {
						console.log(res.data,1111)
						this.courseList = res.data.data
					})
				}
				if(option.moretype=='indextj') {
					getMoretjCourse().then(res => {
						console.log(res.data)
						this.courseList = res.data.data
					})
				}
			}
			else{
				console.log('触发未携带参数')
				// #ifdef MP
				if(set.smallapp.is_sh==1){
					uni.setNavigationBarTitle({
					    title: '精选列表'
					});
					uni.request({
						url: BASE_URL+'index/courses/allcourses',
						method:'GET',
						success:(res) =>{
							this.courseList = res.data.data
						},
						fail:(res)=> {
							console.log(res.data);
						}
					});
				}else{
				if(set.diypage.is_livetojx==1){
					uni.request({
						url: BASE_URL+'index/courses/allcourses',
						method:'GET',
						success:(res) =>{
							this.courseList = res.data.data
						},
						fail:(res)=> {
							console.log(res.data);
						}
					});
				}if(set.diypage.is_livetojx==2){
					uni.setNavigationBarTitle({
					    title: '商品列表'
					});
					uni.request({
						url: BASE_URL+'index/mall/allgoods',
						method:'GET',
						success:(res) =>{
							this.courseList = res.data.data
						},
						fail:(res)=> {
							console.log(res.data);
						}
					});
				}
				else{
					getZhiBoList().then(res => {
						console.log(res.data)
						this.courseList = res.data.data
						this.courseList.forEach(item => {
							item.media = 'live'
						})
					})
				}
				}
				// #endif
				// #ifndef MP
				if(set.diypage.is_livetojx==1){
					uni.request({
						url: BASE_URL+'index/courses/allcourses',
						method:'GET',
						success:(res) =>{
							this.courseList = res.data.data
						},
						fail:(res)=> {
							console.log(res.data);
						}
					});
				}if(set.diypage.is_livetojx==2){
					uni.request({
						url: BASE_URL+'index/mall/allgoods',
						method:'GET',
						success:(res) =>{
							this.courseList = res.data.data
						},
						fail:(res)=> {
							console.log(res.data);
						}
					});
				}
				else{
					getZhiBoList().then(res => {
						console.log(res.data)
						this.courseList = res.data.data
						this.courseList.forEach(item => {
							item.media = 'live'
						})
					})
				}
				// #endif
			}
			if(!this.courseList || this.courseList==[]){
				this.nodata=true
			}
		},
		methods: {
			handleChangeCurrentPage(item) {
				uni.redirectTo({
					url: item.page_route
				})
			},
			navigate(id, media,item) {
				let userinfo=uni.getStorageSync('userinfo')
				if(media == 'live') {
					if(this.tid!=0 && this.tid!='' && this.tid!=null){
						uni.navigateTo({
							url: `/pages/teacher-center/course/course?liveid=${id}`
						});
					}else{
						if(item.price!=0){
							const BASE_URL = uni.BASE_URL
							uni.request({
								url: BASE_URL+'index/live/checkpay',
								method:'POST',
								data:{
									id:id,
									uid:userinfo.uid
								},
								success:(res) =>{
									console.log(res.data);
									if(res.data.data.is_pay==0){
										var item1={
											id:item.id,
											zbtitle:item.zbtitle,
											price:item.price,
											thumb:item.thumb
										}
										uni.navigateTo({
											url: `/pages/confirm-order-form/confirm-order-form?id=${id}&goodstype=live&item=${JSON.stringify(item1)}`
										});
									}else if(res.data.data.is_pay==1){
										uni.navigateTo({
											url: `/pages/zhibo-detail/zhibo-detail?id=${id}`
										});
									}
								},
								fail:(res)=> {
									console.log(res.data);
								}
							});

						}else{
							uni.navigateTo({
								url: `/pages/zhibo-detail/zhibo-detail?id=${id}`
							});
						}
					}
				} else if (media == 'mall'){
					uni.navigateTo({
						url: `/pages/mall/shop-details/shop-details?id=${id}`
					});
				}else{
					uni.navigateTo({
						url: `/pages/course-details/course-details?menuid=${id}`
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.box{
		z-index: 9999999;
		height: 110upx;
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		border-top: 1upx solid #eee;
	}
	.current-page{
		color: #6487F8;
	}
	.nav{
		width: 20%;
		float: left;
		height: 60upx;
	}
	.itemtt{
		height: 110upx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}
	.img{
		width: 40upx;
		height: 40upx;
	}
	.texttt{
		width: 100%;
		text-align: center;
		color: #9B9B9B;
		font-size: 12px;
	}
.maxWidth{flex:1;}
.allcourse {
	display: flex;
	align-items: center;
	padding-top: 50upx;
	margin-left: 20upx;
	image {
		width: 140upx;
		height: 40upx;
	}
	text {
		font-size: 32upx;
		color: #333;
		margin-left: 10upx;
		letter-spacing: 2upx;
	}
}


// 课程列表
.course {
		margin-top: 48upx;
		padding: 0 20upx;
		margin-bottom: 120upx;
		&-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			&-item {
				width: 346upx;
				background-color: #fff;
				border-radius: 20upx;
				margin-bottom: 20upx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 5upx;
				&-vip{
					background-image: linear-gradient(90deg, #d9aa23, #fbda6e);
					position: absolute;
					color: #5b4605;
					font-size: 20upx;
					text-align: center;
					border-radius: 8upx;
					padding: 5upx 10upx;
				}
				.icon {
					position: absolute;
					top: 0;
					right: 5upx;
					background-color: rgba(0, 0, 0, 0.3);
					border-radius: 10upx;
					text-align: center;
					font-size: 22upx;
					font-weight: 400;
					color: #fff;
					padding: 5upx 8upx;
				}
				image {
					width: 100%;
					height: 186upx;
				}
				text:nth-child(2) {
					font-size: 28upx;
					font-weight: 700;
					margin-top: 10upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow:ellipsis;
				}
				text:nth-child(3) {
					font-size: 25upx;
					color: #666;
					margin: 10upx 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow:ellipsis;
				}
				.item-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-left {
						display: flex;
						align-items: center;
						image {
							width: 30upx;
							height: 30upx;
						}
						text {
							font-size: 28upx;
							font-weight: 400;
							color: #666;
							margin: 0;
							margin-left: 6upx;
						}
					}
					&-right {
						text {
							font-size: 28upx;
							font-weight: 400;
							color: #666;
							margin-right: 20upx;
						}
						.mianfei {
							display: block;
							width: 70upx;
							height: 40upx;
							background-color: green;
							border-radius: 5upx;
							text-align: center;
							line-height: 40upx;
							font-size: 24upx;
							font-weight: 400;
							color: #fff;
							margin-right: 20upx;
						}
					}
				}
			}
		}
}

</style>
